<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="/jstl/tld/c-rt.tld"%>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>轨迹查询</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=tyjXNPZrFk5cyOIwnDErDqUKlyEOIZ1M"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
	<link rel="stylesheet" href="${ctx}/css/style.default.css" type="text/css" />
	
	<script type="text/javascript" src="${ctx}/js/jquery-1.8.3.js" ></script>
	<script type="text/javascript" src="${ctx}/js/plugins/jquery-1.7.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugins/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugins/jquery.cookie.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugins/jquery.uniform.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugins/jquery.flot.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugins/jquery.flot.resize.min.js"></script>
	<script type="text/javascript" src="${ctx}/js/plugins/jquery.slimscroll.js"></script>
	<script type="text/javascript" src="${ctx}/js/custom/general.js"></script>
	<script type="text/javascript" src="${ctx}/js/custom/dashboard.js"></script>
	<style type="text/css">
		html,body{
			width:100%;
			height:100%;
			margin:0;
			overflow:hidden;
			font-family:"微软雅黑";
		}
	</style>
	<script type="text/javascript">
		var json = [];
		var data = {};
		var d,start,end,da;
		$(function(){
			d = new Date();
			start = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),d.getHours()-1,d.getMinutes(),d.getSeconds())
			end = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),d.getHours(),d.getMinutes(),d.getSeconds())
			data = {
				startTime:start,
				endTime:end
			};
			orbitFind(data);
		});
		function onChange(){
			var v = $('#overviewselect').val();
			d = new Date();
			if("befor1"==v){
				start = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),d.getHours()-1,d.getMinutes(),d.getSeconds());
				end = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),d.getHours(),d.getMinutes(),d.getSeconds());
			}else if("befor5"==v){
				start = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),d.getHours()-5,d.getMinutes(),d.getSeconds());
				end = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),d.getHours(),d.getMinutes(),d.getSeconds());
			}else if("beforT"==v){
				start = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),00,00,00);
				end = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),23,59,59);
			}else if("beforY"==v){
				start = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate()-1,00,00,00);
				end = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate()-1,23,59,59);
			}else if("beforTW"==v){
				var week = d.getDay();//0-6 星期日-星期六
				switch (week) {
				case 0:
					week = 6
					break;
				case 1:
					week = 0
					break;
				case 2:
					week = 1
					break;
				case 3:
					week = 2
					break;
				case 4:
					week = 3
					break;
				case 5:
					week = 4
					break;
				case 6:
					week = 5
					break;
				default:
					break;
				}
				start = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate()-week,00,00,00);
				end = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),23,59,59);
			}else if("beforPW"==v){
				var week = d.getDay();//0-6 星期日-星期六
				switch (week) {
				case 0:
					week = 7;
					break;
				default:
					break;
				}
				var pw = week+6;
				var d1 = new Date(d.getTime()-(1000*60*60*24*pw));
				start = getStrDate(d1.getFullYear(),d1.getMonth()+1,d1.getDate(),00,00,00);
				var d2 = new Date(d.getTime()-(1000*60*60*24*week));
				end = getStrDate(d2.getFullYear(),d2.getMonth()+1,d2.getDate(),23,59,59);
			}else if("beforTM"==v){
				start = getStrDate(d.getFullYear(),d.getMonth()+1,01,00,00,00);
				end = getStrDate(d.getFullYear(),d.getMonth()+1,d.getDate(),23,59,59);
			}else if("beforPM"==v){
				start = getStrDate(d.getFullYear(),d.getMonth(),01,00,00,00);
				end = getStrDate(d.getFullYear(),d.getMonth(),31,23,59,59);
			}
			data = {
				startTime:start,
				endTime:end
			};
			orbitFind(data);
			
		}
		
		function getStrDate(y,m,d,dy,mi,ss){
			return y+"-"+m+"-"+d+" "+dy+":"+mi+":"+ss;
		}
		var map; 
		function orbitFind(data){
			json = [];
			$.ajax({
				type:'post',
				url:'${ctx}/orbit/findMap',
				data:data,
				dataType:'json',
				async:false,//异步请求改为同步请求
				success:function(data){
					da = data;
				}
			});
			
			/* 创建地图并添加控件begin */  
	        map = new BMap.Map("container");  
	        map.centerAndZoom(new BMap.Point(108.260021, 22.812631), 13);  
	        map.addControl(new BMap.NavigationControl());  
	        map.addControl(new BMap.ScaleControl());  
	        map.addControl(new BMap.OverviewMapControl());  
	        map.addControl(new BMap.MapTypeControl());  
	        map.setCurrentCity("南宁");
	        map.enableScrollWheelZoom(true);//允许鼠标滚动缩放
			if(da.length>0){
				$.each(da,function(i,points){
		        	showPolyLine(points, "red"); 
		        }); 
			}
              
        }; 
        /* 三组示例坐标begin */  
		function showPolyLine(points, color) {  
				  
		        /* 创建地图并添加控件end  */   
	           /* points[][]数据结构为二维集合，这里转换为Marker，再将多个marker点放入pline，组成一条线  begin */  
	           var pLine = [];  
	           for (var i = 0; i < points.length; i++) {  
	           	   var date = points[i].createDate.substring(0,10);
	               pLine.push(new BMap.Point(points[i].x, points[i].y));  
	               if (i == 0 || i == points.length - 1) {//起点终点图标 
                      	//标注  
					   var marker = new BMap.Marker(new BMap.Point(points[i].x,  
	                           points[i].y)) //将起点转化成标注点  
	                   map.addOverlay(marker);  //将起点标注点添加到地图上  
					   var label = new BMap.Label(date+(i==0?"起点":"终点"), { offset: new BMap.Size(20, -10) });  
					   marker.setLabel(label);//添加标注
	               }  
	           }  
	           /* points[][]数据结构为二维数组，这里转换为Marker，再将多个marker点放入pline，组成一条线  end */  
	 
	 
	           /* 添加轨迹接口begin */  
	           var polyline = new BMap.Polyline(pLine, {  
	               strokeColor : color,  
	               strokeWeight : 6,  
	               strokeOpacity : 0.5  
	           });  
	           map.addOverlay(polyline);  
	           /* 添加轨迹接口begin */  
			}
	</script>
</head>
<body>
	<div class="overviewhead">
    	<div class="overviewselect">
            <select id="overviewselect" name="select" onchange="onChange()">
                <option value="befor1">1小时前</option>
                <option value="befor5">5小时前</option>
                <option value="beforT">今天</option>
                <option value="beforY">昨天</option>
                <option value="beforTW">这星期</option>
                <option value="beforPW">上星期</option>
                <option value="beforTM">这个月</option>
                <option value="beforPM">上个月</option>
            </select>
        </div><!--floatright-->
    	从: &nbsp;<input type="text" id="datepickfrom" />  &nbsp; 到: &nbsp;<input type="text" id="datepickto" />
    </div>
    <br clear="all" />
	<div style="width:100%;height:100%;border:0px solid gray" id="container"></div>
</body>
</html>